<template>
  <view :class="ns.b()">
    <view :class="ns.b('header')">
      <text :class="ns.b('caption')">{{ modelData.caption }}</text>
    </view>
    <view :class="ns.b('content')">
      <i-biz-form-detail-shell
        v-for="item in childDetails"
        :key="item.id"
        :controller="controller"
        :modelData="item"
      />
    </view>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { IDEFormItem } from "@ibiz/model-core";
import { findChildFormDetails, FormController } from "@ibiz-template/runtime";
import { PropType, ref } from "vue";
import { useNamespace } from "@/use";

const props = defineProps({
  controller: {
    type: Object as PropType<FormController>,
    required: true,
  },
  modelData: {
    type: Object as PropType<IDEFormItem>,
    required: true,
  },
});
const ns = useNamespace("form-group");
const childDetails = findChildFormDetails(props.modelData);
</script>
<style lang="scss" scoped>
$form-group: (
  bg-color: transparent,
  footer-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
  show-more-color: getCssVar(color-primary),
);

$form-group-header: (
  bg-color: #f7f8fa,
  padding: getCssVar(spacing, tight) getCssVar(spacing, base),
  border-color: getCssVar(color, border),
);

$form-group-caption: (
  text-color: getCssVar(color, text, 2),
  font-size: getCssVar(font-size, header-6),
  font-weight: getCssVar(font-weight, regular),
);

$form-group-content: (
  bg-color: transparent,
  padding: getCssVar(spacing, tight),
  margin: 0,
);

@include b(form-group) {
  @include set-component-css-var("form-group", $form-group);
  @include set-component-css-var("form-group-header", $form-group-header);
  @include set-component-css-var("form-group-caption", $form-group-caption);
  @include set-component-css-var("form-group-content", $form-group-content);
}

// 分组基础样式
@include b(form-group) {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: getCssVar("form-group", "bg-color");
  border-radius: getCssVar("border-radius", "small");

  // 分组标题
  @include e(caption) {
    @include utils-ellipsis;

    font-size: getCssVar("form-group-caption", "font-size");
    font-weight: getCssVar("form-group-caption", "font-weight");
    color: getCssVar("form-group-caption", "text-color");
  }

  // 工具栏
  @include e(toolbar) {
    text-align: right;
  }
}

// 清除分组下form-item的弧度
@include b(form-group) {
  @include b(form-item-container) {
    border-radius: 0;
  }
}

// 折叠相关样式
@include b(form-group-collapse) {
  > .#{bem(form-group-content)} {
    display: block;
  }

  @include when(collapse) {
    > .#{bem(form-group-content)} {
      display: none;
    }
  }
}

// 分组头部
@include b(form-group-header) {
  @include flex;

  align-items: center;
  padding: getCssVar("form-group-header", "padding");
  background-color: getCssVar("form-group-header", "bg-color");

  @include e((left, right)) {
    display: inline-block;
    width: 50%;
  }

  @include e(right) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;

    .van-button {
      height: 100%;
      color: getCssVar(color, link);
      background: transparent;
      border: none;
    }
  }
}

.#{bem("form-group", "", "show-header")} {
  > .#{bem("form-group-content")} {
    margin-bottom: getCssVar("form-group-content", "margin");
    background-color: getCssVar("form-group-content", "bg-color");
  }
}

// 分组底部
@include b(form-group-footer) {
  padding: getCssVar("form-group", "footer-padding");

  @include e(show-more-button) {
    display: inline-block;
    color: getCssVar("form-group", "show-more-color");
  }
}
</style>
